<template>
  <div class="publicBox" id="order_estailsCss">

<el-form ref="form" :model="ruleForm" :rules="rules" class="demo-form-inline publicEditFrom" label-width="160px" label-position="left">

<el-row>
     <div class="pubPageTagP">
       <p>退款管理/新建</p>               
     </div>
</el-row>

    <el-row>
        <el-form-item label="订单编号" label-width="80px">
                <el-input class="pubIptB"  v-model="ruleForm.no"  placeholder="请输入订单编号"></el-input>
                <el-button class="pubBtnBlue btn_left"  type="primary" @click="headleQuery">查询</el-button>
        </el-form-item>
    </el-row>

<div>
    <el-row>
        <div class="pubPage">
        <p>订单信息</p>               
        </div>
    </el-row>
    <div class="warp">
        <div class="box">
            <p>订单时间：{{rowData.createtime}}</p>
            <p>设备编码：{{rowData.equipmentno}}</p>
        </div>
            <div class="box">
            <p>订单编号：{{rowData.no}}</p>
            <p>设备类型：{{rowData.equipmenttypename}}</p>
        </div>
            <div class="box">
            <p>订单类型：{{rowData.ordertypename}}</p>
            <p>服务项目：{{rowData.servicesavailablename}}</p>
        </div>
            <div class="box">
            <p>订单状态：{{rowData.orderstatusname}}</p>
        </div>
    </div>
</div>

<div>
    <el-row>
        <div class="pubPage">
        <p>订单信息</p>               
        </div>
    </el-row>

    <div class="warp">
        <div class="box">
            <p>支付时间：{{rowData.orderpaytime}}</p>
            <p>订单金额：{{rowData.orderamount}}</p>
        </div>
            <div class="box">
            <p>支付流水号：{{rowData.payamount}}</p>
            <p>支付金额：{{rowData.payamount}}</p>
        </div>
            <div class="box">
            <p>支付方式：{{rowData.orderpaytypename}}</p>
            <p>优惠金额：{{rowData.discounttype}}</p>
        </div>
            <div class="box box_p">
            <p>优惠类型：{{rowData.discounttype}}</p>
        </div>
    </div>
</div>

<div>
    <el-row>
        <div class="pubPage">
        <p>用户信息</p>               
        </div>
    </el-row>

    <div class="warp">
        <div class="box">
            <p>用户ID：<span style="color:#5DA5FE">{{rowData.uid}}</span></p>
        </div>
            <div class="box">
            <p>用户手机号：{{rowData.phone}}</p>
        </div>
    </div>
</div>

<div>
    <el-row>
        <div class="pubPage">
        <p>退款信息</p>               
        </div>
    </el-row>

<div class="warp">
        <div class="box">
         <el-form-item label="退款原因" prop="reason" label-width="80px">
                   <el-input
                   style="width:500px"
                     type="textarea"
                     :autosize="{ minRows: 2, maxRows: 4}"
                     placeholder="请输入退款原因"
                     v-model="ruleForm.reason">
                   </el-input>
       </el-form-item>
        </div>
    </div>
</div>

<el-row>
    <el-form-item label="退款金额" label-width="80px"  prop="refundAmount">
            <el-input class="pubIpt300"  v-model="ruleForm.refundAmount"  placeholder="请输入用户订单实际支付金额"></el-input>
    </el-form-item>
</el-row>

<el-row>
    <el-form-item label="退款方式" prop="type" label-width="80px" >
        <el-select v-model.number="ruleForm.type" placeholder="原路返回"  class="pubSlt300">
            <el-option
                v-for="item in selectArr"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
        </el-select>
    </el-form-item>
</el-row>


<el-row class="pubSubmitBtn-row">
            <el-button class="pubBtnBlue105" type="primary" @click="submitForm">提交</el-button>
            <el-button class="pubBtnBlue105" @click="$canCleFn" type="primary">返回</el-button>
</el-row>
</el-form>
  </div>
</template>

<script>
import * as API from '@api/orders.js'
export default {
  components: {


  },
  data() {
    return {
         rowData:{
         },
         ruleForm:{
             reason:'',
             refundAmount:'',
             type:'',
         },
         rules:{
            reason: [
                { required: true, message: '请输入退款原因', trigger: 'blur' },
                ],
            refundAmount:[
                { required: true, message: '请输入用户订单实际支付金额', trigger: 'blur' }, 
                ],
            type:[
                { required: true, message: '请选择退款方式', trigger: 'change' }, 
            ],
         },
        fromNo:'',
        selectArr:[{
            id:0,
            name:'原路返回'
        },
        {
            id:1,
            name:'钱包余额'
        }],
        value:''
    }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {


  },
  // 监控data中的数据变化
  watch: {


 },
  methods: {
        headleQuery(){
            var no = this.ruleForm.no
            if(no === '' || no === undefined){
                this.rowData = {}
                this.$message.warning("请输入订单编号")
                return
            }
            API.getOrderByNo(no).then(res=>{
            if(res.IsPositive){
                    this.rowData = res.Data
                }else{
                    this.$message.error({message:res.ErrorCode})
            }               
            })               
         }, 
       submitForm() {
           this.$refs["form"].validate((valid) => {
            if (valid) {
                    this.addReturnFinance()
            } else {
              console.log('error submit!!');
              return false;
            }
        });
       },
        async addReturnFinance(){
            this.ruleForm.orderId=this.rowData.id
            let res = await API.addReturnFinance(this.ruleForm)
            if(res.IsPositive){
              this.$message.success({message:"操作成功"})
              this.$router.push({path:'/platform/finance/refund'})
            }else{
              this.$message.error({message:res.ErrorCode})
            }
        }
  },
  created() {
           if(Object.keys(this.$route.query).length>0){
               let data=this.$route.query.data
               this.rowData=JSON.parse(data)
           }
  },
  mounted() {


  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang="less" scoped>
 #order_estailsCss{
     display: flex;
     flex-direction: column;
        .pubPage{ 
            padding:0 0 10px 0;
            color: #a7a7a7;
            border-bottom: 1px dashed #000000;
        }
        .warp{
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            width: 1280px;
            // height: 100px;
            margin: 15px 0;
            .box{
                width: 260px;
                p{
                    margin-bottom: 5px;
                    font-size: 16px;
                }
                
            }
            .box_p{
                    margin-top: 26px;
                }
        }
        .textarea{
            width: 100% !important;
            p{
                float: left;
            }
            div{
                width: 513px;
                float: left;
            }
        }
        .btn_left{
            margin-left: 20px;
        }
    }
</style>